<template>
	<view class="v1">
		<view class="avatarUrl">
			<image v-if="vuex_userInfo" :src="vuex_userInfo.avatar_url" mode="widthFix"></image>
			<open-data v-else type="userAvatarUrl"></open-data>
		</view>

		<view class="content">
			<view class="v2"></view>

			<view v-if="isShowUserInfo" class="v3">申请获得以下权限</view>
			<view v-if="isShowUserInfo" class="v4">获取你的公开信息（昵称、头像等）</view>

			<view v-if="!isShowUserInfo" class="v3">手机号快捷登录</view>
			<view v-if="!isShowUserInfo" class="v4">未注册的手机号登录后将自动注册</view>

			<button v-if="isShowUserInfo" @click="getUserProfile" class="u-reset-button u-flex u-row-center btn1" type="default">
				<u-icon size="40" name="weixin-fill"></u-icon>
				<text class="u-margin-left-10">获取微信昵称头像</text>
			</button>
			<button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="u-reset-button u-flex u-row-center btn1" type="default">
				<u-icon size="40" name="weixin-fill"></u-icon>
				<text class="u-margin-left-10">微信手机号快捷登录</text>
			</button>

			<button @click="noSignIn" class="u-reset-button u-flex u-row-center btn2" type="default">暂不登录</button>
		</view>
	</view>
</template>

<script>
	import common from '@/utils/wxApplet/common.js'
	export default {
		data() {
			return {
				// 是否显示获取头像昵称按钮
				isShowUserInfo: this.$store.state.vuex_userInfo ? false : true,
			}
		},
		methods: {
			// 获取昵称、头像等信息
			getUserProfile() {
				common.getUserProfile().then(res => {
					if (res) {
						this.isShowUserInfo = false;
					}
				})
			},
			// 手机号快捷登录
			getPhoneNumber(e) {
				common.getPhoneNumber(e).then(res => {
					if (res) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.noSignIn();
						}, 1300)
					}
				})
			},
			// 暂不登录
			noSignIn() {
				let pages = getCurrentPages()
				// 没有上级页面，直接返回首页
				if (pages.length == 1) {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.v1 {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
		padding-top: 100rpx;
	}

	.avatarUrl {
		width: 200rpx;
		margin: 0 auto;
		height: 200rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #fff;
		box-shadow: 0rpx 0rpx 10rpx $u-light-color;

		image {
			width: 200rpx;
		}
	}

	.content {
		width: 84%;
		margin: 0 auto;
	}

	.v2 {
		width: 100%;
		margin-top: 70rpx;
		height: 2rpx;
		background: $u-border-color;
	}

	.v3 {
		margin-top: 50rpx;
		font-weight: 600;
		font-size: 34rpx;
		color: $u-main-color;
	}

	.v4 {
		margin: 30rpx 0 80rpx 0;
		font-size: 28rpx;
		color: $u-tips-color;
	}

	.btn1 {
		margin-bottom: 24rpx;
		background: #808003;
		color: #fff;
		height: 90rpx;
		border-radius: 90rpx;
	}

	.btn2 {
		background: $u-border-color;
		color: #fff;
		height: 90rpx;
		border-radius: 90rpx;
	}
</style>
